//模拟数据库
let user = [{ id: 1, xinxi: "源盛广场园区停水通知", zhuangtai:"已发布" , name: "admin", time: "2021-06-09 12:12:12", reading: "200",  },
{id: 2, xinxi: "源盛广场园区停水通知", zhuangtai:"已发布" , name: "admin", time: "2021-06-09 12:12:12", reading: "100", },
{ id: 3, xinxi: "源盛广场园区停水通知",  zhuangtai:"已发布" , name: "admin", time: "2021-06-09 12:12:12", reading: "200", },
{id: 4, xinxi: "源盛广场园区停水通知",   zhuangtai:"已发布" , name: "admin", time: "2021-06-09 12:12:12", reading: "100",  },
{id: 5, xinxi: "源盛广场园区停水通知",  zhuangtai:"已发布" , name: "admin", time: "2021-06-09 12:12:12", reading: "200", },
{id: 6, xinxi: "源盛广场园区停水通知",  zhuangtai:"已发布" , name: "admin", time: "2021-06-09 12:12:12", reading: "200", },
{id: 7, xinxi: "源盛广场园区停水通知",  zhuangtai:"已发布" , name: "admin", time: "2021-06-09 12:12:12", reading: "200", },
{id: 8, xinxi: "源盛广场园区停水通知",  zhuangtai:"草稿" , name: "admin", time: "2021-06-09 12:12:12", reading: "200", },
{id: 9, xinxi: "源盛广场园区停水通知",  zhuangtai:"草稿" , name: "admin", time: "2021-06-09 12:12:12", reading: "200", },
{id: 10, xinxi: "源盛广场园区停水通知",  zhuangtai:"草稿" , name: "admin", time: "2021-06-09 12:12:12", reading: "200", },
];


 //声明区域
 window.onload = function () {
    displayData();   //显示事件
    addBtn3Event();  //添加删除事件
    ad();
  getDate();

  }

  //判断是否加载
function ad() {
  if (getDate().length == 0) {
    saveDate(user);
  }
}

//存储到浏览器函数
function saveDate(data) {
  sessionStorage.setItem("user", JSON.stringify(data));
}
//浏览器里获取函数
function getDate() {
  let data = sessionStorage.getItem("user");
  if (data !== null) {
    return JSON.parse(data);
  } else {
    return [];
  }
}


  //文档碎片
  function displayData(){
    $("#tbCard").html("")
    //文档碎片
    let fragment1 = document.createDocumentFragment();
    for (let i = 0; i <5; i++) {
      let tr = document.createElement("tr");
      tr.innerHTML = `
      <td>${user[i].id}</td>
      <td>${user[i].xinxi}</td>
      <td>${user[i].zhuangtai}</td>
      <td>${user[i].name}</td>
      <td>${user[i].time}</td>
      <td>${user[i].reading}</td>
      <td>
          <button class="btn2"  id="xiugai">编辑</button>
          <button class="btn3" data-index='${user[i].id}'>删除</button>
      </td>`;

      fragment1.appendChild(tr);
    }
    $("#tbCard").append(fragment1);
  }
  
   //添加删除事件
   function addBtn3Event() {
    $("#tbCard").on("click", ".btn3", function (e) {
      let id = $(e.target).attr("data-index");
      Btn3UserDatadById(id);
      displayData();

    })
  }
  //根据id，删除对应数组
  function Btn3UserDatadById(id) {
    for (let i = 0; i < user.length; i++) {
      if (user[i].id == id) {
        user.splice(i, 1);
        break;
      }
    }
  }

  // //修改
  // //获取修改标签对象
  // let btn2 = document.getElementsByClassName('btn2');
  // let hxchasi = document.getElementById('hxchasi');
  // let EditorChasn = document.getElementById("EditorChasn").value;
  // let EditorChasac = document.getElementById("EditorChasac").value;
  // let EditorChasm = document.getElementById("EditorChasm").value;
  //获取两个按钮
  let EditorCancel = document.querySelector('.EditorCancel');
  let EditorBaocun = document.querySelector(".EditorBaocun");

  // //打开修改界面
  // $("tbody").on("click", ".btn2", function () { //点击查看按钮触发的动作
  //   $("#hxchasi").show();
  // });

  // EditorBaocun.onclick=function(){
  //   user.splice({
  //       xinxi:"EditorChasn",zhuangtai:"EditorChasac",name:"EditorChasm",id:"",
  //       time:"",reading:"",
  //     });
  //     displayData();
  // }
  // EditorBaocun.onclick = function () {
  //   hxchasi.style.display = 'none';
  // }
  
  // EditorCancel.onclick = function () {
  //   hxchasi.style.display = 'none';
  // }
  //修改
$("#tbCard").on("click", "#xiugai", function () {
  let hxchasi=document.getElementById('hxchasi');
  hxchasi.style.display = 'block';
  let id = $(this).attr("data-index");
  $(".baocun").click(function () {
    hxchasi.style.display = 'none';
    let xinxi = $("#EditorChasn").val();
    let zhuangtai = $("#EditorChasac").val();
    let name = $("#name").val();
    let data = getDate();
    console.log(data);
    for (let i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        data[i].xinxi = EditorChasn;
        data[i].zhuangtai = EditorChasac;
        data[i].name = name;
      }
      saveDate(data);
      displayData();
    }
  });
});
let hxchasi=document.getElementById('hxchasi');
//数据修改的模态框隐藏
$("#hxchasi").on("click", ".xgcancel", function () {
  hxchasi.style.display = 'none';
});

  //添加
  //获取新增标签对象
  let btnCardtianjia = document.getElementById('btnCardtianjia');
  let Increase = document.getElementById('Increase');
 
  //获取两个按钮
  let oTianjia = document.getElementById('Increase_Tianjia');
  let aCell = document.getElementById("Increase_Cell");

  // 新增

  btnCardtianjia.onclick = function () {
    Increase.style.display = 'block'
  }
  //声明变量
  let Subject = document.getElementById("Subject");
  let Zone = document.getElementById("Zone");
  let Information = document.getElementById("Information");
  let Time = document.getElementById("Time");
  
  Increase_Tianjia.onclick=function(){
    Informationinput=Information.value;
    Subjectinput=Subject.value;
    Zoneinput=Zone.value;
    Timeinput=Time.value;
    user.push({
        xinxi:Informationinput, zhuangtai:'',id:'',name:'',time:Timeinput,
        reading:"",
      });
      displayData();
      paging();
      Increase.style.display = 'none';
  }
  aCell .onclick=function(){
    Increase.style.display = 'none'
  }






  function onlouad(n,a) { //分页调用函数
    $("#tbCard").html("")
    //文档碎片
    let fragment1 = document.createDocumentFragment();
    for (let i = n; i < a; i++) {
      let tr = document.createElement("tr");
      tr.innerHTML = `
      <td>${user[i].id}</td>
      <td>${user[i].xinxi}</td>
      <td>${user[i].zhuangtai}</td>
      <td>${user[i].name}</td>
      <td>${user[i].time}</td>
      <td>${user[i].reading}</td>
      <td>
          <button class="btn2"  id="xiugai">编辑</button>
          <button class="btn3" data-index='${user[i].id}'>删除</button>
      </td>`;

      fragment1.appendChild(tr);
    }
    $("#tbCard").append(fragment1);
  }
   //分页
   paging();
   function paging() {
     let page = 1;//第几页
     let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
     let serialNumber = user.length;//序号
     onlouad(0, 5)//初始页面信息，第一页
     $("#inputPage").val(page);//页码
    
 
     // 下一页
     $("#nextpage").click(function () {
       if (no + 5 < serialNumber) {//如果no+5小于数据条数
         no += 5;
         page++;
         $("#inputPage").val(page);
         if (serialNumber >= (no + 5)) {
           onlouad(no, no + 5);
         } else (
           onlouad(no, serialNumber)
 
         )
       }
 
     });
 
     // 上一页
     $("#lastpage").click(function () {
       if (no - 5 >= 0) {
         no -= 5;
         page--;
         $("#inputPage").val(page);
         onlouad(no, no + 5);
       }
     });
   }

   //查询
function choice(obj) {
  console.log("obj",obj.value)
  let i = $(obj).val();
  if (i == 2) {
    let user = JSON.parse(sessionStorage.getItem("user"));
    console.log(user);
    console.log("进入已发布");
    showChoice(user);
    function showChoice(data) {
      $("#tbCard")[0].innerHTML = "";
      for (let i = 0; i < user.length; i++) {
        if (`${user[i].zhuangtai}` == "已发布") {
          $(`#tbCard`)[0].innerHTML += `<tr>
          <td>${data[i].id}</td>
      <td>${data[i].xinxi}</td>
      <td>${data[i].zhuangtai}</td>
      <td>${data[i].name}</td>
      <td>${data[i].time}</td>
      <td>${data[i].reading}</td>
      <td>
          <button class="btn2"  id="xiugai" >编辑</button>
          <button class="btn3" data-index='${data[i].id}'>删除</button>
      </td>

    </tr>
          `;
        }
      }
    }
  } else if (i == 3) {
    let user = JSON.parse(sessionStorage.getItem("user"));
    console.log(user);
    console.log("进入草稿");
    showChoice(user);
    function showChoice(data) {
      $("#tbCard")[0].innerHTML = "";
      for (let i = 0; i < user.length; i++) {
        if (`${user[i].zhuangtai}` == "草稿") {
          $(`#tbCard`)[0].innerHTML += `<tr>
          <td>${data[i].id}</td>
      <td>${data[i].xinxi}</td>
      <td>${data[i].zhuangtai}</td>
      <td>${data[i].name}</td>
      <td>${data[i].time}</td>
      <td>${data[i].reading}</td>
      <td>
          <button class="btn2"  id="xiugai" >编辑</button>
          <button class="btn3" data-index='${data[i].id}'>删除</button>
      </td>
      </tr>
          `;
        }
      }
    }
  }  else if (i == 1) {
    let messages = JSON.parse(sessionStorage.getItem("user"));
    console.log(messages);
    console.log("进入全部");
    showChoice(messages);
    function showChoice(data) {
      $("#tbCard")[0].innerHTML = "";
      for (let i = 0; i < messages.length; i++) {
        $(`#tbCard`)[0].innerHTML += `<tr>
        <td>${data[i].id}</td>
      <td>${data[i].xinxi}</td>
      <td>${data[i].zhuangtai}</td>
      <td>${data[i].name}</td>
      <td>${data[i].time}</td>
      <td>${data[i].reading}</td>
      <td>
          <button class="btn2"  id="xiugai" >编辑</button>
          <button class="btn3" data-index='${data[i].id}'>删除</button>
      </td>
    </tr>
          `;
      }
    }
  }
}